<%@ page language="java" contentType="text/html; charset=utf-8"
         pageEncoding="utf-8" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="renderer" content="webkit">
    <title>学员自主约车</title>
    <link rel="stylesheet" href="<%=path%>/CSS/responsive.css">
    <link href="<%=path%>/CSS/style.css" rel="stylesheet" type="text/css"/>
    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
        }

        .main {
            width: 100%;
            height: 900px;
            background: #ffffff;
        }

        .container {
            margin-left: auto;
            margin-right: auto;
            padding-left: 15px;
            padding-right: 15px;
            width: 1100px;
        }

        .centent {
            width: 1100px;
            padding-bottom: 400px
        }

        .div_top {
            margin-top: 25px;
            height: 50px;
            width: 95%;
            margin-left: 40px;
        }

        ul {
            list-style-type: none;
            border-bottom: 1px solid #57a0ff;
            height: 45px;
            padding-left: 0px;
            width: 100%;
        }

        .top_zl.active {
            color: #57a0ff;
            font-size: 16px;
            border-bottom: 5px solid #57a0ff;
            float: left;
            height: 40px;
            margin-right: 40px;
        }

        .top_zl {
            color: #444444;
            font-size: 16px;
            float: left;
            height: 45px;
            margin-right: 40px;
        }

        .jx span {
            text-align: center;
            font-size: 22px;
            color: #57a0ff;
            font-family: 700;
        }

        .top_zl:hover {
            color: #57a0ff;
            font-size: 16px;
            float: left;
            height: 40px;
            margin-right: 40px;
            cursor: pointer;
        }

        .subject-list img {
            margin-left: 40px;
            margin-top: 50px;
            cursor: pointer;
        }

        .subject-list img:hover {
            -moz-transform: translate(0px, -15px);
            -webkit-transform: translate(0px, -15px);
            -ms-transform: translate(0px, -15px);
            -webkit-transition: all 0.7s linear;
            -moz-transition: all 0.7s linear;
            -o-transition: all 0.7s linear;
            -ms-transition: all 0.7s linear;
            transition: all 0.7s linear;
        }

        .subject-order {
            margin-left: 40px;
            margin-top: 20px;
            width: 100%;
        }

        .subject-order .subject-order-xinxi {
            font-size: 14px;
            color: #444444;
            float: left;
            padding-right: 20px
        }

        .subject-order .subject-order-qx {
            font-size: 15px;
            color: #57a0ff;
            float: left;
            border-bottom: 2px solid #57a0ff;
        }

        #modal-overlay {
            visibility: hidden;
            position: fixed;
            text-align: center;
            filter: alpha(opacity=70);
            background-color: #444444;
            z-index: 100;
            left: 0px;
            top: 0px;
            bottom: 0px;
            width: 100%;
            height: 100%;
            opacity: 0.7;
            -moz-opacity: 0.7;
        }

        .modal-data, .modal-data2, .modal-data3 {
            visibility: hidden;
            z-index: 1001;
            width: 50%;
            min-height: 520px;
            margin: 200px auto;
            background-color: #FFFFFF;
            padding: 5px;
            text-align: center;
            position: fixed;
            left: 25%;
            right: 25%;
        }

        .modal-data-main-list, .modal-data-main3, .modal-data-main2 {
            width: 100%;
            min-height: 520px;
        }

        .modal-data-lcsj {
            width: 100%;
            height: 80px
        }

        .modal-data-lcsj strong {
            display: block;
            text-align: center;
            font-size: 16px;
            color: #57a0ff;
        }

        .modal-data-lcsj-list {
            width: 100%;
            height: 350px;
            overflow: scroll;
            background: #ffffff;
            margin-bottom: 15px;
            line-height: 35px;
            padding: 5px 0;
        }

        /* ::-webkit-scrollbar-track {
        -webkit-box-shadow:inset006pxrgba(0,0,0,0.3);
        border-radius:10px;
        } */
        .lcsj-list, .lcsj-list-full {
            background: #ffffff;
            border: 1px solid #cccccc;
            color: #444444;
            font-size: 14px;
            width: 85%;
            height: 40px;
            margin-bottom: 15px;
            margin-left: 80px;
            margin-right: 20px;
        }

        .lcsj-list.active {
            background: #ffffff;
            border: 1px solid #57a0ff;
            color: #57a0ff;
            font-size: 14px;
            width: 85%;
            height: 40px;
            margin-bottom: 15px;
            margin-left: 80px;
            margin-right: 20px;
        }

        .lcsj-list:HOVER {
            background: #ffffff;
            border: 1px solid #57a0ff;
            color: #57a0ff;
            font-size: 14px;
            width: 85%;
            height: 40px;
            margin-bottom: 15px;
            margin-left: 80px;
            margin-right: 20px;
        }

        .scbtn, .submit, .success {
            background: #57a0ff;
            border-radius: 20px;
            width: 130px;
            height: 35px;
            outline: none;
            color: #ffffff;
        }

        .modal-data-next {
            margin-top: 20px
        }

        .modal-data-lcsj-list-ul {
            margin-left: 0px;
            width: 100%;
            height: 100%;
        }

        .modal-data-lcsj-list ul {
            border: 0;
        }

        .modal-data-lcsj-list-ul-li {
            margin-left: 110px;
            height: 100px;
        }

        .modal-data-lcsj-list-coach-list {
            width: 100%;
        }

        .modal-data-lcsj-list-coach-data, .modal-data-lcsj-list-coach-full {
            width: 170px;
            text-align: center;
            color: #444444;
            float: left;
            border: 1px solid #cccccc;
            margin-left: 50px;
            height: 70px;
            background: #ffffff;
        }

        .modal-data2 .modal-data-lcsj-list-coach-list span {
            display: inline;
        }

        .modal-data-lcsj-list-coach-list div {
            height: 30px;
        }

        .prev {
            background: #ffffff;
            border-radius: 20px;
            width: 130px;
            height: 35px;
            outline: none;
            color: #57a0ff;
            border: 1px solid #57a0ff;
            margin-right: 30px
        }

        .modal-data-lcsj-list-coach-data.active {
            width: 170px;
            text-align: center;
            color: #57a0ff;
            float: left;
            border: 1px solid #57a0ff;
            margin-left: 50px;
            height: 70px;
            background: #ffffff;
        }

        .modal-data-lcsj-list-coach-data:HOVER {
            width: 170px;
            text-align: center;
            color: #57a0ff;
            float: left;
            border: 1px solid #57a0ff;
            margin-left: 50px;
            height: 70px;
            background: #ffffff;
        }

        .modal-data3-order-success {
            text-align: center;
            margin-top: 100px;
        }

        .modal-data3-order-success-wz {
            text-align: center;
            margin-top: 30px;
            color: #57a0ff;
        }

        .modal-data3-order-success-data {
            text-align: center;
            margin-top: 30px;
        }

        .modal-data3-order-success-data span {
            font-size: 14px;
            color: #999999;
        }

        .modal-data3-success {
            margin-top: 50px;
        }

        .colse {
            text-align: right;
            height: 25px;
        }

        .colse-img, .prev, .submit, .success, .subject-order-qx {
            cursor: pointer;
        }
    </style>
</head>
<body>
<div id="modal-overlay">

</div>
<div class="modal-data">
    <div class="modal-data-main-list">
        <div class="modal-data-lcsj">
            <div class="colse">
                <img src="<%=path%>/image/kmyy/close.png" class="colse-img" style="padding: 4px;">
            </div>
            <strong>请选择科目二练车时间</strong>
        </div>
        <div class="modal-data-lcsj-list">
            <div class="lcsj-list-full" onclick="pitchOn($(this))" style="background: #f1f2f4;color: #999999">
                科目三2017年7月21日（21.22）培训名单培训名单(122/122)<a style="color: #d31515;padding-left: 2px">已满</a></div>
            <div class="lcsj-list active" onclick="pitchOn($(this))">科目三2017年7月21日（21.22）培训名单(100/122)</div>
            <div class="lcsj-list" onclick="pitchOn($(this))">科目三2017年7月21日（21.22）培训名单(100/122)</div>
            <div class="lcsj-list" onclick="pitchOn($(this))">科目三2017年7月21日（21.22）培训名单(100/122)</div>
            <div class="lcsj-list" onclick="pitchOn($(this))">科目三2017年7月21日（21.22）培训名单(100/122)</div>
            <div class="lcsj-list" onclick="pitchOn($(this))">科目三2017年7月21日（21.22）培训名单(100/122)</div>
            <div class="lcsj-list" onclick="pitchOn($(this))">科目三2017年7月21日（21.22）培训名单(100/122)</div>
            <div class="lcsj-list" onclick="pitchOn($(this))">科目三2017年7月21日（21.22）培训名单(100/122)</div>
            <div class="lcsj-list" onclick="pitchOn($(this))">科目三2017年7月21日（21.22）培训名单(100/122)</div>
        </div>
        <div class="modal-data-next">
            <input type="button" class="scbtn" value="下一步">
        </div>
    </div>
</div>

<div class="modal-data3" style="height: 450px">
    <div class="modal-data-main3">
        <div class="modal-data3-order-success">
            <img src="<%=path%>/image/kmyy/yycg.png">
        </div>
        <div class="modal-data3-order-success-wz">
            <strong style="font-size: 15px;">恭喜您预约成功！</strong>
        </div>
        <div class="modal-data3-order-success-data">
            <span style="margin-bottom: 10px">练车时间：2017年12月19 - 12月31日</span>
            <span>教练：张三</span>
        </div>
        <div class="modal-data3-success">
            <input type="button" class="success" value="完  成">
        </div>
    </div>
</div>
<div class="modal-data2" style="height: 560px;width: 940px;">
    <div class="modal-data-main2 container" style="width: 900px;">
        <div class="modal-data-lcsj" style="height: 120px">
            <strong style="padding-top: 30px">请选择科目二练车教练</strong>
            <span style="color: #999999;font-size: 14px;padding-top: 20px">练车时间：2017年12月19 - 12月31日</span>
        </div>
        <div class="modal-data-lcsj-list">
            <ul class="modal-data-lcsj-list-ul">
                <li class="modal-data-lcsj-list-ul-li">
                    <ul class="modal-data-lcsj-list-coach-list">
                        <li class="modal-data-lcsj-list-coach-full" style="background: #f1f2f4;color: #999999">
                            <div>张三教练</div>
                            <div>(12/12)<span style="color: #d31515;padding-left: 5px">已满</span></div>
                        </li>
                        <li class="modal-data-lcsj-list-coach-data active">
                            <div>张三教练</div>
                            <div>(12/10)</div>
                        </li>
                        <li class="modal-data-lcsj-list-coach-data">
                            <div>张三教练</div>
                            <div>(12/10)</div>
                        </li>
                    </ul>
                </li>
                <li class="modal-data-lcsj-list-ul-li">
                    <ul class="modal-data-lcsj-list-coach-list">
                        <li class="modal-data-lcsj-list-coach-full" style="background: #f1f2f4;color: #999999">
                            <div>张三教练</div>
                            <div>(12/12)<span style="color: #d31515;padding-left: 5px">已满</span></div>
                        </li>
                        <li class="modal-data-lcsj-list-coach-data">
                            <div>张三教练</div>
                            <div>(12/10)</div>
                        </li>
                        <li class="modal-data-lcsj-list-coach-data">
                            <div>张三教练</div>
                            <div>(12/10)</div>
                        </li>
                    </ul>
                </li>
                <li class="modal-data-lcsj-list-ul-li">
                    <ul class="modal-data-lcsj-list-coach-list">
                        <li class="modal-data-lcsj-list-coach-full" style="background: #f1f2f4;color: #999999">
                            <div>张三教练</div>
                            <div>(12/12)<span style="color: #d31515;padding-left: 5px">已满</span></div>
                        </li>
                        <li class="modal-data-lcsj-list-coach-data">
                            <div>张三教练</div>
                            <div>(12/10)</div>
                        </li>
                        <li class="modal-data-lcsj-list-coach-data">
                            <div>张三教练</div>
                            <div>(12/10)</div>
                        </li>
                    </ul>
                </li>
                <li class="modal-data-lcsj-list-ul-li">
                    <ul class="modal-data-lcsj-list-coach-list">
                        <li class="modal-data-lcsj-list-coach-full" style="background: #f1f2f4;color: #999999">
                            <div>张三教练</div>
                            <div>(12/12)<span style="color: #d31515;padding-left: 5px">已满</span></div>
                        </li>
                        <li class="modal-data-lcsj-list-coach-data">
                            <div>张三教练</div>
                            <div>(12/10)</div>
                        </li>
                        <li class="modal-data-lcsj-list-coach-data">
                            <div>张三教练</div>
                            <div>(12/10)</div>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
        <div class="modal-data2-next">
            <input type="button" class="prev" value="上一步">
            <input type="button" class="submit" value="确  定">
        </div>
    </div>
</div>
<div class="main">

    <div style="height: 100px">

    </div>
    <div class="container">
        <div class="jx">
            <span>南昌驾校</span>
        </div>
        <div class="centent">
            <div class="centent-div">
                <div class="div_top">
                    <ul>
                        <li class="top_zl active">小车预约</li>
                        <li class="top_zl">大车预约</li>
                    </ul>
                </div>
                <div class="subject">
                    <div class="subject-list">
                        <img alt="科目二练车" src="<%=path%>/image/kmyy/kmelc.png">
                        <img alt="科目三练车" src="<%=path%>/image/kmyy/kmslc.png">
                    </div>
                    <div class="subject-order">
                        <span class="subject-order-xinxi">您已预约 ：2017年8月25日-2017年8月30日科目二练车 </span>
                        <span class="subject-order-xinxi">教练：张三</span>
                        <span class="subject-order-qx"> 是否取消</span>
                    </div>
                </div>

            </div>

        </div>
    </div>
</div>
</body>
<script type="text/javascript" src="<%=path%>/JQuery/jquery-1.8.2.js"></script>
<script type="text/javascript">
    //大小车切换
    $(".top_zl").click(function () {
        $(".top_zl.active").removeClass("active");
        $(this).addClass("active");
    })

    //弹出练车时间
    $(".subject-list img").click(function () {
        $('#modal-overlay').css('visibility', 'visible')
        $('.modal-data').css('visibility', 'visible')
    })

    //点击选中练车时间换样式
    function pitchOn(_this) {
        $(".lcsj-list.active").removeClass("active");
        _this.addClass("active");
    }

    //点击下一步选择教练
    $(".scbtn").click(function () {
        $('#modal-overlay').css('visibility', 'visible')
        $('.modal-data').css('visibility', 'hidden')
        $('.modal-data2').css('visibility', 'visible')
    })

    //点击教练选中并且换样式
    $(".modal-data-lcsj-list-coach-data").click(function () {
        $(".modal-data-lcsj-list-coach-data.active").removeClass("active");
        $(this).addClass("active");
    })

    //返回上一步
    $(".prev").click(function () {
        $('#modal-overlay').css('visibility', 'visible')
        $('.modal-data2').css('visibility', 'hidden')
        $('.modal-data').css('visibility', 'visible')
    })

    //提交
    $(".submit").click(function () {
        $('#modal-overlay').css('visibility', 'visible')
        $('.modal-data2').css('visibility', 'hidden')
        $('.modal-data3').css('visibility', 'visible')
    })

    //完成，并刷新页面
    $(".success").click(function () {
        $('#modal-overlay').css('visibility', 'hidden')
        $('.modal-data3').css('visibility', 'hidden')
        location.reload();
    })
    //关闭弹窗
    $(".colse-img").click(function () {
        $('#modal-overlay').css('visibility', 'hidden')
        $('.modal-data').css('visibility', 'hidden')
    })

</script>
</html>